<template>
  <el-table :data="fieldFrom" :row-key="Date.now().toString()" class="wk-table-items" style="width: 100%">
    <el-table-column label="序号" width="50">
      <template v-slot:default="{ row, column, $index }">
        {{ $index + 1 }}
      </template>
    </el-table-column>
    <el-table-column v-for="(item, index) in fieldList" :key="index"
                     v-if="getShowValue(item)"
                     :prop="item.field"
                     :min-width="getMinWidth(item.formType)">
      <template v-slot:header="scope">
        <span v-if="item.isNull == 1" class="red">*</span>{{ item.name }}
      </template>
      <template v-slot:default="{ row, column, $index }">
        <wk-form-item :prop-prefix="`${propPrefix || ''}[${$index}].`" :item="fieldList[index]"
                      :index="$index"
                      :field-from="fieldFrom[$index]"
                      :disabled="disabled"
                      @change="fieldChange">
          <!--          <template slot-scope="{ data, index }">-->
          <template v-slot:default="{ data, index }">
            <slot :data="data" :index="$index"/>
          </template>
        </wk-form-item>
      </template>
    </el-table-column>
    <el-table-column v-if="!disabled" :resizable="false" fixed="right" label="操作" width="60">
      <template #default="{ row, column, $index }">
        <el-button icon="wk wk-icon-bin" link @click="deleteClick($index)"></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
// table 风格展示事项


import WkFormItem from '../WkForm/WkFormItem.vue'


defineOptions({
  name: 'WkTableItems',
})

const props = defineProps({
  // 表单验证前缀
  propPrefix: {
    type: String,
    default: ''
  },
  fieldFrom: {
    type: Array,
    default: () => {
      return []
    }
  },
  fieldList: {
    type: Array,
    default: () => {
      return []
    }
  },
  disabled: Boolean
})


const emits = defineEmits(['delete', 'change'])

function deleteClick(index) {
  emits('delete', index)
}

function getMinWidth(formType) {
  if (formType === 'date_interval' ||
      formType === 'dateRange' ||
      formType === 'file' ||
      formType === 'location' ||
      formType === 'position') {
    return 250
  }
  return 150
}

/**
 * 判断展示
 */
function getShowValue(item) {
  if (item.hasOwnProperty('show')) {
    return item.show
  }
  return true
}

/**
 * 字段change
 */
function fieldChange(item, index, value, valueList) {
  emits('change', item, index, value, valueList)
}

</script>

<script>

// import {defineAsyncComponent} from "vue";

export default {


  components: {
    // WkFormItem: defineAsyncComponent(() => import('../WkForm/WkFormItem.vue'))
  },

  props: {},

  data() {
    return {}
  },

  computed: {},

  watch: {},

  created() {
  },

  mounted() {
  },

  beforeDestroy() {
  },

  methods: {}
}
</script>

<style lang="scss">
.wk-table-items {
  th {
    line-height: initial;
  }

  .wk-form-item {
    padding: 8px 0 !important;
    margin-bottom: 0 !important;

    .el-form-item__label {
      display: none;
    }

    width: auto !important;
  }
}
</style>

<style lang="scss" scoped>
.red {
  color: #F56C6C;
  margin-right: 4px;
}
</style>
